---
title: "Quick Start" 
---

Welcome to the AG Grid documentation. After reading this page you will have an overview of the key concepts of AG Grid that you will use on a daily basis.

## Your First Grid

Add AG Grid to your application in these steps:

{% if isFramework("react", "angular", "vue") %}
**1. NPM Install**
{% /if %}

{% if isFramework("react") %}
<!-- Install React -->

```bash
npm install ag-grid-react
```
{% /if %}

{% if isFramework("angular") %}
<!-- Install Angular -->

```bash
npm install ag-grid-angular
```
{% /if %}

{% if isFramework("vue") %}
<!-- Install Vue3 -->

```bash
npm install ag-grid-vue3
```
{% /if %}

{% if isFramework("javascript") %}
**1. Provide a Container**

<!-- Create JavaScript -->

Load the AG Grid library and create a blank container div:

```html
<html lang="en">
 <head>
   <!-- Includes all JS & CSS for AG Grid -->
   <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
 </head>
 <body>
   <!-- Your grid container -->
   <div id="myGrid"></div>
 </body>
</html>
```

**2. Instantiating the Grid**

Create the grid inside of your container div using `createGrid`.

```js
// Grid Options: Contains all of the grid configurations
const gridOptions = {};

// Your Javascript code to create the grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);
```

**3. Define Rows and Columns**

```js
// Grid Options: Contains all of the grid configurations
const gridOptions = {
 // Row Data: The data to be displayed.
 rowData: [
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ],
 // Column Definitions: Defines the columns to be displayed.
 columnDefs: [
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ]
};
```

**4. Styling the Grid**

Add the `ag-theme-quartz` CSS class to your grid container div to apply the grid's theme.

```html
<!-- Your grid container -->
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
```
{% /if %}

{% if isFramework("react") %}
<!-- Create React -->

**2. Import the Grid**

```js
import { AgGridReact } from 'ag-grid-react'; // AG Grid Component
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
```

**3. Define Rows and Columns**

```js
const GridExample = () => {
 // Row Data: The data to be displayed.
 const [rowData, setRowData] = useState([
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ]);
 
 // Column Definitions: Defines the columns to be displayed.
 const [colDefs, setColDefs] = useState([
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ]);

 // ...

}
```

**4. Grid Component**

The `AgGridReact` component is wrapped in a parent container `div`. Style is applied to the parent container.
Rows and Columns are set as `AgGridReact` component attributes.

```jsx
return (
 // wrapping container with theme & size
 <div
  className="ag-theme-quartz" // applying the grid theme
  style={{ height: 500 }} // the grid will fill the size of the parent container
 >
   <AgGridReact
       rowData={rowData}
       columnDefs={colDefs}
   />
 </div>
)
```
{% /if %}

{% if isFramework("angular") %}

**2. Import the Grid**

```js
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component
import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
```

**3. Define Rows and Columns**

```jsx
@Component({
 selector: 'app-root',
 standalone: true,
 imports: [AgGridAngular], // Add AG Grid component
 styleUrls: ['./app.component.css'],
 template: ``
})

export class AppComponent {
 // Row Data: The data to be displayed.
 rowData = [
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ];

 // Column Definitions: Defines the columns to be displayed.
 colDefs: ColDef[] = [
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ];
}
```

**4. Grid Component**

Rows and Columns are set as `ag-grid-angular` component attributes.

```js
template:
`
 <!-- The AG Grid component -->
 <ag-grid-angular
   [rowData]="rowData"
   [columnDefs]="colDefs">
 </ag-grid-angular>
`
```

**5. Styling the Grid**

Import the required dependencies into your `styles.css` file.

```css
/* Core Grid CSS */
@import 'ag-grid-community/styles/ag-grid.css';
/* Quartz Theme Specific CSS */
@import 'ag-grid-community/styles/ag-theme-quartz.css';
```

Add the `class` and `style` props to the `ag-grid-angular` component.

```html
<ag-grid-angular
 class="ag-theme-quartz"
 style="height: 500px;"
 ...
>
</ag-grid-angular>
```
{% /if %}

{% if isFramework("vue") %}

**2. Import the Grid**

```html
<template></template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
import { AgGridVue } from "ag-grid-vue3"; // AG Grid Component

export default {
 name: "App",
 components: {
   AgGridVue, // Add AG Grid Vue3 component
 },
 setup() {},
};
</script>
```

**3. Define Rows and Columns**

```js
setup() {
 // Row Data: The data to be displayed.
 const rowData = ref([
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ]);

 // Column Definitions: Defines the columns to be displayed.
 const colDefs = ref([
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ]);

 return {
   rowData,
   colDefs,
 };
},
```

**4. Grid Component**

Rows and Columns are set as `ag-grid-vue` component attributes. Styling is applied through the class and style attributes.

```html
<template>
 <!-- The AG Grid component -->
 <ag-grid-vue
   :rowData="rowData"
   :columnDefs="colDefs"
   style="height: 500px"
   class="ag-theme-quartz"
 >
 </ag-grid-vue>
</template>
```
{% /if %}

{% if isFramework("angular") %}
**6. Finished**
{% /if %}

{% if isFramework("react", "vue", "javascript") %}
**5. Finished**
{% /if %}

Below is a live example of the application running. Click `</> Code` to see the code.

{% gridExampleRunner title="Quick Start Example" name="quick-start-example"  exampleHeight=302 /%}

{% note %}
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
{% /note %}

Now that you have a basic grid running, the remainder of this page explores some of the key concepts.

## Showing Data

### Mapping Values

The `field` or `valueGetter` attributes map data to columns. A field maps to a field in the data. A [Value Getter](./value-getters/) is a function callback that returns the cell value.

The `headerName` provides the title for the header. If missing the title is derived from `field`.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { headerName: "Make & Model", valueGetter: p => p.make + ' ' + p.model},
        { field: "price" },
    ],
};
```

### Text Formatting

Format text for cell content using a [Value Formatter](./value-formatters/).

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: "price", valueFormatter: p => '£' + Math.floor(p.value).toLocaleString() },
    ],
};
```

### Cell Components

Add buttons, checkboxes or images to cells with a [Cell Component](./component-cell-renderer/).

{% if isFramework("react") %}
```jsx
const CustomButtonComponent = (props) => {
   return <button onClick={() => window.alert('clicked') }>Push Me!</button>;
 };

const [colDefs, setColDefs] = useState([
   { field: "button", cellRenderer: CustomButtonComponent },
   // ...
 ]);
```
{% /if %}

{% if isFramework("javascript") %}
```js
class CustomButtonComponent {
 eGui;
 eButton;
 eventListener;

 init(params) {
   this.eGui = document.createElement("div");
   let button = document.createElement("button");
   button.className = "btn-simple";
   button.innerText = "Push Me!";
   this.eventListener = () => alert("clicked");
   button.addEventListener("click", this.eventListener);
   this.eGui.appendChild(button);
 }

 getGui() {
   return this.eGui;
 }

 refresh(params) {
   return true;
 }

 destroy() {
   if (button) {
     button.removeEventListener("click", this.eventListener);
   }
 }
}


const columnDefs = [
   { field: "button", cellRenderer: CustomButtonComponent },
   // ...
];
```
{% /if %}

{% if isFramework("angular") %}
```js
@Component({
 standalone: true,
 template: `<button (click)="buttonClicked()">Push Me!</button>`,
})
export class CustomButtonComponent implements ICellRendererAngularComp {
 agInit(params: ICellRendererParams): void {}
 refresh(params: ICellRendererParams) {
   return true;
 }
 buttonClicked() {
   alert("clicked");
 }
}

columnDefs: ColDef[] = [
   { field: "button", cellRenderer: CustomButtonComponent },
   // ...
];
```
{% /if %}

{% if isFramework("vue") %}
```js
// ...
 components: {
   "ag-grid-vue": AgGridVue,
   CustomButtonComponent: {
     template: `
        <button @click="buttonClicked()">Push Me!</button>
       `,
     methods: {
       buttonClicked() {
         alert("clicked");
       },
     },
   },
 },
 data: function () {
   return {
   columnDefs: [
       { field: "button", cellRenderer: CustomButtonComponent },
       // ...
   ],
 };
},
// ...
```
{% /if %}

### Resizing Columns

Columns are [Resized](./column-sizing/) by dragging the Column Header edges. Additionally assign `flex` values to
allow columns to flex to the grid width.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: "make", flex: 2 }, //This column will be twice as wide as the others
        { field: "model", flex: 1 },
        { field: "price", flex: 1 },
        { field: "electric", flex: 1 }
    ],
};
```

### Example

This example demonstrates mapping and formatting values, cell components, and resizing columns.

{% gridExampleRunner title="Showing Data Example" name="showing-data-example" exampleHeight=302 /%}

## Working with Data

By default, the row data is used to infer the [Cell Data Type](./cell-data-types/). The cell data type allows grid features, such as filtering and editing, to work without additional configuration.

### Filtering

[Column Filters](./filtering/) are embedded into each column menu. These are enabled using the `filter` attribute. The filter type is inferred from the cell data type.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: "make", filter: true },
    ],
};
```

There are 5 [Provided Filters](./filtering/) which can be set through this attribute.
You can also create your own [Custom Filter](./filter-custom/).

[Floating Filters](./floating-filters/) embed the Column Filter into the header for ease of access.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: "make", filter: true, floatingFilter: true },
    ],
};
```

### Editing

Enable [Editing](./cell-editing/) by setting the `editable` attribute to `true`. The cell editor is inferred from the cell data type.

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: "make", editable: true },
    ],
};
```

Set the cell editor type using the `cellEditor` attribute. There are 7 [Provided Cell Editors](./provided-cell-editors/) which can be set through this attribute.
You can also create your own [Custom Editors](./cell-editors/).

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        {
            field: "make",
            editable: true,
            cellEditor: 'agSelectCellEditor',
            cellEditorParams: {
                values: ['Tesla', 'Ford', 'Toyota'],
            },
        },
    ],
};
```

### Sorting

Data is [Sorted](./row-sorting/) by clicking the column headers. Sorting is enabled by default.

### Row Selection

[Row Selection](./row-selection/) is enabled using the `rowSelection` attribute. Use the `checkboxSelection` column definition attribute to render checkboxes for selection.

```js {% frameworkTransform=true %}
const gridOptions = {
    // Column Definitions: Defines the columns to be displayed.
    columnDefs: [
        { field: "make", checkboxSelection: true },
    ],
    rowSelection: 'multiple',
};
```

### Pagination

Enable [Pagination](./row-pagination/) by setting `pagination` to be true.

```js {% frameworkTransform=true %}
const gridOptions = {
    pagination: true,
    paginationPageSize: 500,
    paginationPageSizeSelector: [200, 500, 1000],
};
```

### Example

This example demonstrates filtering, editing, sorting, row selection, and pagination.

{% gridExampleRunner title="Working With Data Example" name="working-with-data-example" exampleHeight=500 /%}

## Themes & Style

### Themes

[Grid Themes](./themes/) define how the grid looks (colors, font, spacing etc).
The grid comes with [Provided Themes](./themes/#provided-themes) such as Quartz and Alpine.
To use a theme you need to 1) import the themes CSS and 2) apply the theme to the parent
HTML element of the grid.

{% if isFramework("react") %}
```jsx
import "ag-grid-community/styles/ag-theme-quartz.css"; // import Quartz theme
// import "ag-grid-community/styles/ag-theme-alpine.css"; // import Alpine theme, not used here
...
return (
 <div class="ag-theme-quartz"> // set Quartz Theme on parent div
   <AgGridReact rowData={...} columnDefs={...} />
 </div>
)
```
{% /if %}

{% if isFramework("javascript") %}
```js
import "ag-grid-community/styles/ag-theme-quartz.css"; // import Quartz theme
// import "ag-grid-community/styles/ag-theme-alpine.css"; // import Alpine theme, not used here
```

```html
<!-- Your grid container -->
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
```
{% /if %}

{% if isFramework("angular") %}
```js
import "ag-grid-community/styles/ag-theme-quartz.css"; // import Quartz theme
// import "ag-grid-community/styles/ag-theme-alpine.css"; // import Alpine theme, not used here
// ...
 template: `<div style="height: 100%; box-sizing: border-box;">
   <ag-grid-angular
     // ...
     [class]="themeClass"
   ></ag-grid-angular>
 </div>`,
// ...
public themeClass: string = "ag-theme-quartz";
```
{% /if %}

{% if isFramework("vue") %}
```js
import "ag-grid-community/styles/ag-theme-quartz.css"; // import Quartz theme
// import "ag-grid-community/styles/ag-theme-alpine.css"; // import Alpine theme, not used here

const VueExample = {
 template: `
       <div style="height: 100%">
           <div style="height: 100%; box-sizing: border-box;">
               <ag-grid-vue
               // ...
               :class="themeClass"></ag-grid-vue>
           </div>
       </div>
   `,
// ...
 data: function () {
   return {
     // ...
     themeClass: "ag-theme-quartz",
   };
 },
// ...
```
{% /if %}

{% flex justifyContent="center" %}

{% imageCaption imagePath="resources/themeQuartz.png" alt="AG Theme Quartz" descriptionTop=true %}
{% flex justifyContent="center" %}**Quartz**{% /flex %}
{% /imageCaption %}

{% imageCaption imagePath="resources/themeQuartzDark.png" alt="AG Theme Quartz Dark" descriptionTop=true %}
{% flex justifyContent="center" %}**Quartz Dark**{% /flex %}
{% /imageCaption %}

{% /flex %}


{% flex justifyContent="center" %}

{% imageCaption imagePath="resources/themeAlpine.png" alt="AG Theme Alpine" descriptionTop=true %}
{% flex justifyContent="center" %}**Alpine**{% /flex %}
{% /imageCaption %}

{% imageCaption imagePath="resources/themeAlpineDark.png" alt="AG Theme Alpine Dark" descriptionTop=true %}
{% flex justifyContent="center" %}**Alpine Dark**{% /flex %}
{% /imageCaption %}

{% /flex %}

### Customising a Theme

Customise themes using CSS variables.

```css
.ag-theme-quartz {
    /* Changes the color of the grid text */
    --ag-foreground-color: rgb(163, 64, 64);
    /* Changes the color of the grid background */
    --ag-background-color: rgba(215, 245, 231, 0.212);
    /* Changes the background color of selected rows */
    --ag-selected-row-background-color: rgba(0, 38, 255, 0.1);
}
```

{% imageCaption imagePath="resources/customisingThemeExample.png" alt="Customising a Theme with CSS Variables" centered=true constrained=true /%}

### Figma

If you are designing within Figma, you can use the [AG Grid Design System](./ag-grid-design-system/) to replicate the  Quartz and Alpine AG Grid themes within Figma. These default themes can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes. These can then be exported and generated into new AG Grid themes.

{% imageCaption imagePath="resources/FDS-Example.png" alt="Figma Design System with AG Grid" centered=true constrained=true /%}

### Cell Style

Define rules to apply styling to cells using `cellClassRules`. This can be used, for example, to set cell background colour based on its value.

```css
.rag-green {
  background-color: #33cc3344;
}
```

```js {% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [{
        field: 'electric',
        cellClassRules: {
            // apply green to electric cars
            'rag-green': params => params.value === true,
        }
    }],
};
```

### Row Style

Define rules to apply styling to rows using  and `rowClassRules`. This allows changing style (e.g. row colour) based on row values.

```css
.rag-red {
  background-color: #cc222244;
}
```

```js {% frameworkTransform=true %}
const gridOptions = {
    rowClassRules: {
        // apply red to Ford cars
        'rag-red': params => params.data.make === 'Ford',
    },
};
```

### Example

This example demonstrates cell style and row style.

{% gridExampleRunner title="Theming Example" name="theming-example" /%}

## Next Steps

* Read our [Introductory Tutorial](./deep-dive/).
* Watch our [Video Tutorials](./videos/).
